<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <title>后端登录页面</title>
    <link rel="stylesheet" href="../resources/bootstrap-4.3.1-dist/css/bootstrap.css">
    <script src="../resources/jquery/jquery-3.4.1.min.js"></script>
    <script src="../resources/bootstrap-4.3.1-dist/js/bootstrap.js"></script>
    <script type="text/javascript">
        $(function () {
            var show_num = [];
            draw(show_num);
            $("#canvas").on('click', function () {
                draw(show_num);
            })
            $(".btn").on('click', function () {
                var val = $("#yzcode").val().toLowerCase();
                var num = show_num.join("");
                if (val == '') {
                    alert('请输入验证码！');
                    return ;
                } else if (val == num) {
                    // alert('提交成功！');
                    $(".input-val").val('');
                    // draw(show_num);
                } else {
                    alert('验证码错误！请重新输入！');
                    $(".input-val").val('');
                    return ;
                }
                var username = $("#username").val();
                var password = $("#password").val();

                var dat = {
                    "username": username,
                    "password": password,
                    "yzcode": val,
                    "realyzcode": num
                };

                $.ajax({
                    type: 'post',
                    // url:"http://localhost:5000/adminlogin",
                    url: "http://localhost/user/adminlogin",
                    data: dat,
                    success: function (data) {
                        //跳转商品列表
                        if (data.result == true) {
                            alert("登录成功");
                            location.href = "limitPolicyPage.html";
                        } else if (data.msg == "密码错误") {
                            alert("用户名或密码错误")
                        } else if (data.msg == "验证码错误"){
                            alert("验证码错误")
                        } else {
                            alert("用户名或密码错误")
                        }
                    }, error: function () {
                        alert("请求出错，请稍后重试");
                    }
                });

            })
        })
        //生成并渲染出验证码图形
        function draw(show_num) {
            var canvas_width = $('#canvas').width();
            var canvas_height = $('#canvas').height();
            var canvas = document.getElementById("canvas");//获取到canvas的对象，演员
            var context = canvas.getContext("2d");//获取到canvas画图的环境，演员表演的舞台
            canvas.width = canvas_width;
            canvas.height = canvas_height;
            var sCode = "a,b,c,d,e,f,g,h,i,j,k,m,n,p,q,r,s,t,u,v,w,x,y,z,A,B,C,E,F,G,H,J,K,L,M,N,P,Q,R,S,T,W,X,Y,Z,1,2,3,4,5,6,7,8,9,0";
            var aCode = sCode.split(",");
            var aLength = aCode.length;//获取到数组的长度
            for (var i = 0; i < 4; i++) { //这里的for循环可以控制验证码位数（如果想显示6位数，4改成6即可）
                var j = Math.floor(Math.random() * aLength);//获取到随机的索引值
                // var deg = Math.random() * 30 * Math.PI / 180;//产生0~30之间的随机弧度
                var deg = Math.random() - 0.5; //产生一个随机弧度
                var txt = aCode[j];//得到随机的一个内容
                show_num[i] = txt.toLowerCase();
                var x = 10 + i * 20;//文字在canvas上的x坐标
                var y = 20 + Math.random() * 8;//文字在canvas上的y坐标
                context.font = "bold 23px 微软雅黑";
                context.translate(x, y);
                context.rotate(deg);
                context.fillStyle = randomColor();
                context.fillText(txt, 0, 0);
                context.rotate(-deg);
                context.translate(-x, -y);
            }
            for (var i = 0; i <= 5; i++) { //验证码上显示线条
                context.strokeStyle = randomColor();
                context.beginPath();
                context.moveTo(Math.random() * canvas_width, Math.random() * canvas_height);
                context.lineTo(Math.random() * canvas_width, Math.random() * canvas_height);
                context.stroke();
            }
            for (var i = 0; i <= 30; i++) { //验证码上显示小点
                context.strokeStyle = randomColor();
                context.beginPath();
                var x = Math.random() * canvas_width;
                var y = Math.random() * canvas_height;
                context.moveTo(x, y);
                context.lineTo(x + 1, y + 1);
                context.stroke();
            }
        }
        //得到随机的颜色值
        function randomColor() {
            var r = Math.floor(Math.random() * 256);
            var g = Math.floor(Math.random() * 256);
            var b = Math.floor(Math.random() * 256);
            return "rgb(" + r + "," + g + "," + b + ")";
        }

    </script>
</head>

<body style="background-image: url('../resources/img/Login.png'); background-repeat: no-repeat; background-size:cover">
<div class="row">
    <div class="col-md-10"></div>
    <div class="col-md-2" style="margin: 360px 1500px;">
        <div class="input-group input-group-lg" style="margin-bottom: 5px;">
            <span class="input-group-addon" style="line-height: 48px;font-size: 18px;color: black;">账号：</span>
            <input id="username" type="text" class="form-control" placeholder="请输入手机号">
        </div>

        <div class="input-group input-group-lg" style="margin-bottom: 5px;">
            <span class="input-group-addon" style="line-height: 48px;font-size: 18px;color: black;">密码：</span>
            <input id="password" type="password" class="form-control" placeholder="请输入密码">
        </div>

        <div class="input-group input-group-lg" style="margin-bottom: 5px;">
            <span class="input-group-addon" style="line-height: 48px;font-size: 18px;color: black;">验证码：</span>
            <input id="yzcode" type="text" class="form-control">
            <canvas id="canvas" width="100" height="30"></canvas>
        </div>

        <div class="input-group" style="margin-bottom: 20px;width: 100%;text-align: center;">
            <div class="btn-group btn-group-lg" style="margin-right: auto;margin-left: auto;">
                <button type="button" class="btn btn-default" style="background-color: #ffc107;">登录/注册</button>
            </div>
        </div>
    </div>
</div>
</body>

</html>